// 核心组件加载控制器 - 暴露为全局变量
window.componentLoader = {
        // 组件存储对象
        components: {
            header: {
                url: '/assets/components/header.html', // 推荐从外部文件加载
                cache: null
            },
            footer: {
                url: '/assets/components/footer.html',
                cache: null
            }
        },

        /**
         * 加载组件
         * @param {string} componentName 组件名称(header/footer)
         * @param {Element} targetElement 目标DOM元素
         * @param {Function} callback 加载完成回调
         */
        loadComponent(componentName, targetElement, callback = () => {}) {
            if (!this.components[componentName]) {
                console.error(`未找到组件: ${componentName}`);
                return;
            }

            const component = this.components[componentName];
            
            // 优先使用缓存
            if (component.cache) {
                targetElement.innerHTML = component.cache;
                callback();
                return;
            }

            // 从服务器加载组件(推荐方式)
            fetch(component.url)
                .then(response => response.text())
                .then(html => {
                    component.cache = html;
                    targetElement.innerHTML = html;
                    callback();
                })
                .catch(error => {
                    console.error(`组件加载失败: ${componentName}`, error);
                    // 降级使用内联HTML(备用方案)
                    targetElement.innerHTML = this.getFallbackHTML(componentName);
                    callback();
                });
        },

        /**
         * 内联HTML备用方案(仅在加载失败时使用)
         */
        getFallbackHTML(componentName) {
            switch(componentName) {
                case 'header':
                    return `
                        <div class="container">
                            <div class="logo">
                                <img src="/assets/images/logo.png" class="logo" alt="鸿升冠腾科技">
                                <span>鸿升冠腾 (深圳) 科技有限公司</span>
                                <span class="english-name">Hongsheng Guanteng (Shenzhen) Technology Co., Ltd.</span>
                            </div>
                            <nav class="main-nav">
                                <ul>
                                    <li><a href="/index.html" data-i18n="navigation.home">首页</a></li>
                                    <li><a href="/pages/vtb-account.html" data-i18n="navigation.vtbAccount">VTB开户业务</a></li>
                                    <li><a href="/pages/china-russia-payment.html" data-i18n="navigation.chinaRussiaPayment">中俄收付款</a></li>
                                    <li><a href="/pages/global-payment.html" data-i18n="navigation.globalPayment">全球收付款</a></li>
                                    <li><a href="/pages/contact.html" data-i18n="navigation.contact">业务留言</a></li>
                                    <li><a href="/pages/about.html" data-i18n="navigation.about">关于我们</a></li>
                                    <li><a href="/pages/contact-us.html" data-i18n="navigation.contactUs">联系我们</a></li>
                                </ul>
                            </nav>
                            <div class="header-actions">
                                <div class="language-switcher">
                                    <button data-language="zh-CN">中文</button>
                                    <button data-language="en">English</button>
                                    <button data-language="ru">Русский</button>
                                </div>
                                <div class="customer-service">
                                    <span>客服热线：+86 21 20528088</span>
                                </div>
                            </div>
                        </div>
                    `;
                case 'footer':
                    return `
                        <div class="container">
                            <div class="footer-content">
                                <div class="company-info">
                                    <h4>鸿升冠腾 (深圳) 科技有限公司</h4>
                                    <p>Hongsheng Guanteng (Shenzhen) Technology Co., Ltd.</p>
                                    <p>客服热线：+86 21 20528088</p>
                                </div>
                                <div class="quick-links">
                                    <h4>快速链接</h4>
                                    <ul>
                                        <li><a href="/pages/about.html" data-i18n="navigation.about">关于我们</a></li>
                                        <li><a href="/pages/contact-us.html" data-i18n="navigation.contactUs">联系我们</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="copyright">
                                <p>&copy; 2025 鸿升冠腾 (深圳) 科技有限公司. 保留所有权利.</p>
                            </div>
                        </div>
                    `;
                default:
                    return '';
            }
        },

        /**
         * 初始化导航激活状态
         */
        initNavActiveState() {
            const currentPath = window.location.pathname;
            const navLinks = document.querySelectorAll('.main-nav a');
            
            navLinks.forEach(link => {
                if (link.getAttribute('href') === currentPath) {
                    link.classList.add('active');
                    
                    // 添加激活动画
                    link.style.transition = 'all 0.3s ease';
                    link.style.transform = 'scale(1.05)';
                    setTimeout(() => {
                        link.style.transform = 'scale(1)';
                    }, 300);
                }
            });
        },

        /**
         * 初始化语言切换功能
         */
        initLanguageSwitcher() {
            const langButtons = document.querySelectorAll('.language-switcher button');
            const currentLang = document.documentElement.lang || 'zh-CN';
            
            // 设置当前语言按钮激活状态
            langButtons.forEach(button => {
                if (button.dataset.language === currentLang) {
                    button.classList.add('active');
                }
                button.addEventListener('click', () => {
                    // 移除所有按钮激活状态
                    langButtons.forEach(btn => btn.classList.remove('active'));
                    // 添加当前按钮激活状态
                    button.classList.add('active');
                    // 更新HTML语言属性
                    document.documentElement.lang = button.dataset.language;
                    // 触发语言切换事件(可被翻译系统监听)
                    document.dispatchEvent(new CustomEvent('languageChanged', {
                        detail: { language: button.dataset.language }
                    }));
                });
            });
        },

        /**
         * 初始化移动端导航
         */
        initMobileNav() {
            if (window.innerWidth <= 768) {
                this.createMobileNav();
            }
            window.addEventListener('resize', () => {
                if (window.innerWidth <= 768) {
                    this.createMobileNav();
                } else {
                    this.removeMobileNav();
                }
            });
        },

        /**
         * 创建移动端导航
         */
        createMobileNav() {
            if (document.querySelector('.mobile-nav-toggle')) return;
            
            const navContainer = document.querySelector('.main-nav');
            if (!navContainer) return;
            
            // 创建汉堡菜单按钮
    const toggleBtn = document.createElement('button');
    toggleBtn.classList.add('mobile-nav-toggle');
    toggleBtn.innerHTML = `
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    `;
    navContainer.parentNode.insertBefore(toggleBtn, navContainer);
    
    // 添加点击事件切换导航显示状态
    toggleBtn.addEventListener('click', () => {
        navContainer.classList.toggle('active');
    });
    
    // 添加移动端导航样式
    const style = document.createElement('style');
            style.textContent = `
                  .mobile-nav-toggle { display: block; position: absolute; top: 15px; right: 15px; z-index: 100; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
                  .main-nav { position: relative; }
                  .main-nav ul { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 15px; margin: 0; }
                  .main-nav.active ul { display: flex; }
                  @media (min-width: 769px) { .mobile-nav-toggle { display: none; } .main-nav ul { display: flex; position: static; background: transparent; box-shadow: none; flex-direction: row; } }
                .main-nav {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 80%;
                    height: 100%;
                    background: white;
                    box-shadow: 2px 0 12px rgba(0,0,0,0.1);
                    transform: translateX(-100%);
                    transition: transform 0.3s ease;
                    z-index: 99;
                    padding: 60px 20px 20px;
                    box-sizing: border-box;
                }
                .main-nav.active {
                    transform: translateX(0);
                }
                .main-nav ul {
                    flex-direction: column;
                    gap: 20px;
                }
                .main-nav a {
                    display: block;
                    padding: 10px 0;
                    font-size: 1.2rem;
                }
            `;
            document.head.appendChild(style);
            
            // 切换导航状态
            toggleBtn.addEventListener('click', () => {
                navContainer.classList.toggle('active');
            });
        },

        /**
         * 移除移动端导航
         */
        removeMobileNav() {
            const toggleBtn = document.querySelector('.mobile-nav-toggle');
            const mainNav = document.querySelector('.main-nav');
            if (toggleBtn) toggleBtn.remove();
            if (mainNav) mainNav.classList.remove('active');
            
            // 移除移动端样式
            const style = document.querySelector('style[text*="mobile-nav-toggle"]');
            if (style) style.remove();
        }
    };

// DOMContentLoaded事件中初始化必要组件
document.addEventListener('DOMContentLoaded', function() {
        // 加载header和footer
        const header = document.querySelector('header');
        const footer = document.querySelector('footer');
        
        if (header) {
            componentLoader.loadComponent('header', header, () => {
                componentLoader.initNavActiveState();
                setTimeout(() => {
                    componentLoader.initLanguageSwitcher();
                    const currentLang = document.documentElement.lang || 'zh-CN';
                    document.dispatchEvent(new CustomEvent('languageChanged', { detail: { language: currentLang } }));
                }, 0);
            });
        }
        if (footer) {
            componentLoader.loadComponent('footer', footer, () => {
                const currentLang = document.documentElement.lang || 'zh-CN';
                document.dispatchEvent(new CustomEvent('languageChanged', { detail: { language: currentLang } }));
            });
        }
        
        componentLoader.initLanguageSwitcher();
        componentLoader.initMobileNav();
    });